<template>
  <view class="page-wrapper" :data-theme="theme">
    <view v-if="loading" class="loading">
      加载中..
    </view>
    <template v-else>
      <view v-if="detail.hot_search_title">
        <image class="list-item__cover"  :src="detail.hot_search_cover" mode="widthFix" :lazy-load="false">
        </image>  
        <view class="list-item__title">{{ detail.hot_search_title }}</view>
        <view class="list-item__desc" v-if="detail.hot_search_desc">{{ detail.hot_search_desc }}</view>
        <view class="list-item__footer flex justify-between">
            <view class="">
              热度：{{ detail.hot_search_heat }}
            </view>
            <navigator :url="`/pages/webview/index?url=${encodeURIComponent(detail.hot_search_link)}`">阅读原文</navigator >
        </view>
    </view> 
    <view v-else>
      <text class="">
        暂无数据
      </text>
    </view>
    </template>
  </view>
</template>

<script>
  import { sleep } from '@/shared/index'
  export default {
    name: "Detail",
    data() {
      return {
        loading: false,
        detail: {
          hot_search_title: '',
          hot_search_desc: '',
          hot_search_heat: '',
          hot_search_link: '',
          hot_search_cover: ''
        }
      }
    },
    created () {
      this.loading = true
    },
    async onLoad(options) {
      const link = options.link ? decodeURIComponent(options.link) : ''

      if (this.$store.state.list.data.length === 0) {
        await this.$store.dispatch('list/getList')
      }
      await sleep(1000)
      const target = this.$store.state.list.data.find(item => item.hot_search_link === link) || {}
      Object.assign(this.detail, target)
      this.loading = false
    }
  }
</script>

<style lang="scss">
  .page-wrapper {
    padding: 40rpx;
  }

  .loading {
    line-height: 400rpx;
    height: 400rpx;
    width: 90vw;
    margin: 0 auto;
    text-align: center;
  }

  .list-item__cover {
    width: 90vw;
    height: 320rpx;
    vertical-align: middle;
    border-radius: 20rpx;
    margin-bottom: 40rpx;
  }
  .list-item__title {
    font-size: 32rpx;
    font-weight: bold;
    color: var(--text-color);
    text-indent: 20rpx;
    margin: 20rpx;
  }
  .list-item__desc {
    margin: 20rpx;
    text-indent: 2em;
    font-size: 26rpx;
    color: var(--text-secondary-color);
  }
  .list-item__footer {
    padding: 20rpx;
    padding-top: 0;
    font-size: 26rpx;
    color: var(--text-secondary-color);
  }
</style>